<script setup lang="ts">
	import { ref } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "新增",
			status: 1,
			sort: 1,
			name: "",
			materialCategoryId: 0,
			parentId: 0,
			parentOptions: null
		})
	});
	const statusOptions = [
		{
			value: 1,
			label: "启用"
		},
		{
			value: 2,
			label: "禁用"
		}
	];
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="物料类型名称" prop="name">
					<el-input v-model="newFormInline.name" clearable placeholder="请输入物料类型名称" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">

				<el-form-item label="父物料类型">
					<el-cascader v-model="newFormInline.parentId" class="w-full"
						:options="newFormInline.parentOptions" :props="{
						  value: 'materialCategoryId',
						  label: 'name',
						  emitPath: false,
						  checkStrictly: true
						}" clearable filterable placeholder="请选择父物料类型">
						<template #default="{ node, data }">
							<span>{{ data.name }}</span>
							<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
						</template>
					</el-cascader>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="状态" prop="status">
					<el-select v-model="newFormInline.status" placeholder="请选择状态" class="w-full" clearable>
						<el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="newFormInline.sort" class="!w-full" :min="1" :max="9999"
						controls-position="right" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped></style>